import {EChartsOption} from 'echarts'

//==============================================================
/**
 * UP主比例
 */
export const upOptions: EChartsOption = {
  title: {
    text: "UP主信息占比",
    left: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)'
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data: [
      "个人认证",
      "机构认证",
      "普通用户"
    ]
  },
  series: [
    {
      name: "UP主信息占比",
      type: 'pie',
      radius: '55%',
      center: ['50%', '60%'],
      data: [
        { value: 234, name: "个人认证" },
        { value: 135, name: "机构认证" },
        { value: 1548, name: "普通用户" }
      ],
      itemStyle: {
          color: function() {
              // 生成随机颜色
              return `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`;
          }
      }
    }
  ]
}

/**
 * UP主粉丝排行前10
 */
export const fansOptions: EChartsOption = {
  title: {
    text: "UP主粉丝排行前10",
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    top: '5%',
  },
  series: [
    {
      type: 'pie',
      radius: ['40%', '70%'],
      center: ['50%', '60%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: '黑马' },
        { value: 735, name: '硅谷' },
        { value: 580, name: '图灵' },
        { value: 484, name: '动力节点' },
        { value: 300, name: '老男孩' }
      ]
    }
  ]
};


/**
 * UP主获赞排行前10
 */
export const startOptions: EChartsOption = {
  title: {
    text: 'UP主获赞数',
    left: 'center'
  },
  tooltip: {
    trigger: 'item',
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    top: '10%'
  },
  series: [
    {
      type: 'funnel',
      left: '20%',
      width: '80%',
      labelLine: {
        show: false
      },
      itemStyle: {
        opacity: 0.7
      },
      emphasis: {
        label: {
          position: 'inside',
        }
      },
      data: []
    },
  ]
};

/**
 * 动态柱状图。视频播放量
 */
export const videoViewOptions: EChartsOption = {
  tooltip: {
      trigger: 'item', // 触发类型，'item' 表示数据项图形触发
      formatter: function (params) {
          // params 包含当前数据项的信息
          return `视频名: ${params.data.title}<br/>播放量: ${params.value}`;
      }
  },
  title: {
    text: '视频播放量排行',
    left: 'center'
  },
  grid: {
    top: 30,
    bottom: 30,
    left: 150,
    right: 80
  },
  xAxis: {
    max: 'dataMax',
  },
  yAxis: {
    type: 'category',
    inverse: true,
    data: [],
    axisLabel: {
      show: true,
      fontSize: 14,
      rich: {
        flag: {
          fontSize: 25,
          padding: 5
        }
      }
    },
    animationDuration: 300,
    animationDurationUpdate: 300
  },
  series: [
    {
      realtimeSort: true,
      seriesLayoutBy: 'column',
      type: 'bar',
      data: [],
      itemStyle: {
        color: function () {
          // 生成随机的 RGB 颜色
          return `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`;
        },
      },
      encode: {
        x: 0,
        y: 3
      },
      barWidth: '80%', // 柱子的宽度，可以是百分比或具体像素值
      barMaxWidth: 80, // 柱子的最大宽度，可以是具体像素值
      barCategoryGap: '10%', // 设置柱子之间的间距
      barGap: '80%', // 设置同一类目下的柱子之间的间距
      label: {
        show: true,
        precision: 1,
        position: 'right',
        valueAnimation: true,
        fontFamily: 'monospace'
      }
    }
  ],
  // Disable init animation.
  animationDuration: 0,
  animationDurationUpdate: 2000,
  animationEasing: 'linear',
  animationEasingUpdate: 'linear',
  graphic: {
    elements: [
      {
        type: 'text',
        right: 160,
        bottom: 60,
        style: {
          font: 'bolder 80px monospace',
          fill: 'rgba(100, 100, 100, 0.25)'
        },
        z: 100
      }
    ]
  }
};
/**
 * 动态柱状图。视频点赞量
 */
export const videoStartOptions: EChartsOption = {
    title: {
        text: '视频点赞量排行',
        left: 'center'
    },
    grid: {
        top: 30,
        bottom: 30,
        left: 150,
        right: 80
    },
    xAxis: {
        max: 'dataMax',
    },
    yAxis: {
        type: 'category',
        inverse: true,
        data: [],
        axisLabel: {
            show: true,
            fontSize: 14,
            rich: {
                flag: {
                    fontSize: 25,
                    padding: 5
                }
            }
        },
        animationDuration: 300,
        animationDurationUpdate: 300
    },
    series: [
        {
            realtimeSort: true,
            seriesLayoutBy: 'column',
            type: 'bar',
            data: [],
            itemStyle: {
                color: function () {
                    // 生成随机的 RGB 颜色
                    return `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`;
                },
            },
            encode: {
                x: 0,
                y: 3
            },
            barWidth: '80%', // 柱子的宽度，可以是百分比或具体像素值
            barMaxWidth: 80, // 柱子的最大宽度，可以是具体像素值
            barCategoryGap: '10%', // 设置柱子之间的间距
            barGap: '80%', // 设置同一类目下的柱子之间的间距
            label: {
                show: true,
                precision: 1,
                position: 'right',
                valueAnimation: true,
                fontFamily: 'monospace'
            }
        }
    ],
    // Disable init animation.
    animationDuration: 0,
    animationDurationUpdate: 2000,
    animationEasing: 'linear',
    animationEasingUpdate: 'linear',
    graphic: {
        elements: [
            {
                type: 'text',
                right: 160,
                bottom: 60,
                style: {
                    font: 'bolder 80px monospace',
                    fill: 'rgba(100, 100, 100, 0.25)'
                },
                z: 100
            }
        ]
    }
};
